<template>
  <el-dialog
    class="dialogStyle"
    style="width: 75vw"
    :title="'5-2南一部传感器参数'"
    v-model="visible"
  >
    <div class="container">
      <div class="panel">
        <div class="panel-header">
          <h2>5-2南一部传感器参数</h2>
          <span class="note"
            ><span class="note-highlight">注:</span>
            以下温度单位为:℃，振动单位为:mm/s</span
          >
        </div>

        <div class="table-container">
          <el-row class="header-row">
            <el-col :span="4">设备名称</el-col>
            <el-col :span="2">参数</el-col>
            <el-col :span="4">设备名称</el-col>
            <el-col :span="2">参数</el-col>
            <el-col :span="4">设备名称</el-col>
            <el-col :span="2">参数</el-col>
            <el-col :span="4">设备名称</el-col>
            <el-col :span="2">参数</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">2-B 1#副驱内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3-A 1#主驱外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">4-B 2#主驱内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">9-A 4#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">2-B 1#副驱内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3-A 1#主驱外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">4-B 2#主驱内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">9-A 4#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">2-A 1#副驱外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">5-B 2#副驱内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">4-A 2#主驱外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">10-B 5#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">2-A 1#副驱外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">5-B 2#主驱内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">4-A 2#主驱内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">10-B 5#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">1#冷却风扇电机温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">5-A 2#副驱外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3#冷却风扇电机温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">10-A 5#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">1#循环水泵电机温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">5-A 2#主驱外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3#循环水泵电机温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">10-A 5#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">1#一体机内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">2#冷却风扇电机温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3#一体机内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">11-B 6#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">1#一体机内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">2#循环水泵电机温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3#一体机内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">11-B 6#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">1#一体机外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">2#一体机内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3#一体机外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">11-A 6#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">1#一体机外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">2#一体机内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">3#一体机外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">11-A 6#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">6-B 1#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">2#一体机外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">8-B 3#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">12-B 7#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">6-B 1#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">2#一体机外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">8-B 3#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">12-B 7#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">6-A 1#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">7-B 2#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">8-A 3#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">12-A 7#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">6-A 1#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">7-B 2#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">8-A 3#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">12-A 7#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">3-B 1#主驱内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">7-A 2#张紧导向外侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">9-B 4#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">13-B 8#张紧导向内侧温度</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
          <el-row>
            <el-col :span="4">3-B 1#主驱内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">7-A 2#张紧导向外侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">9-B 4#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
            <el-col :span="4">13-B 8#张紧导向内侧振动</el-col>
            <el-col :span="2">XX</el-col>
          </el-row>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, nextTick, computed } from "vue";
import { act, createWebSocket } from "@/utils/websocket"; //引入websocket
import {
  useTagResults,
  useTagResultsFromSource,
} from "@/utils/useTagResults.ts";

// const tagKeys = [
//   "SCDL1",
//   "SCGL1",
//   "SCPL1",
//   "WD1",
//   "WD2",
//   "WD3",
//   "WD4",
//   "WD5",
//   "SCDL2",
//   "SCGL2",
//   "SCPL2",
//   "WD7",
//   "WD8",
//   "WD9",
//   "WD10",
//   "WD11",
//   "SCDL3",
//   "SCGL3",
//   "SCPL3",
//   "WD13",
//   "WD14",
//   "WD15",
//   "WD16",
//   "WD17",
//   "BPYX1",
//   "BPGZ1",
//   "M125",
//   "BPYX2",
//   "BPGZ2",
//   "M126",
//   "BPYX3",
//   "BPGZ3",
//   "M127",
//   "LQFJ1",
//   "LQFJ2",
//   "LQFJ3",
//   "EJPP1",
//   "EJPP2",
//   "HNDM",
//   "HNYW",
//   "HNZS",
//   "PDSD",
//   "GTWD1",
//   "GTWD2",
//   "ZDDY",
//   "HNBHGZ",
//   "M001",
//   "ZJZC",
//   "PZDW",
//   "M116",
//   "M117",
//   "M118",
//   "M119",
//   "M121",
//   "M120",
//   "ZJGZ",
//   "M122",
//   "M123",
//   "M124",
//   "BPTZ",
//   "PZGZ",
//   "PZBZ",
//   "YXBS1",
//   "YXBS2",
//   "YXBS3",
//   "YXBS4",
//   "YXBS5",
//   "YXBS6",
//   "YXBS7",
//   "YXBS8",
//   "YXBS9",
//   "YXBS10",
//   "YXBS11",
//   "YXBS12",
// ];
// let computedResults = useTagResults(tagKeys, act.ControlLogix5500.Belt_4_2_2);

const computedResults = (
  key: string,
  op: operator,
  op_number?: number,
  retain?: number
) =>
  computed(() => {
    return useTagResults(act.PD_52_N.PD_52_N[key], op, op_number, retain);
  });
// 定义变量内容
const visible = ref(false);
// 打开弹窗
const openDialog = () => {
  visible.value = true; // 打开弹窗
};
// 取消按钮
const cancleBtn = () => {
  visible.value = false;
};
// 暴露变量
defineExpose({
  openDialog,
});
</script>

<style scoped lang="scss">
.dialogStyle {
  .container {
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .panel {
    display: flex;
    flex-direction: column;
    background-color: var(--el-bg-color);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    background-color: var(--el-color-primary-light-9);
    border-bottom: 1px solid var(--el-border-color-light);

    h2 {
      margin: 0;
      font-size: 16px;
      font-weight: 500;
      color: var(--el-text-color-primary);
    }

    .note {
      font-size: 14px;
      color: var(--el-text-color-regular);

      .note-highlight {
        color: var(--el-color-danger);
        font-weight: 500;
      }
    }
  }

  .table-container {
    overflow-x: auto;
    border: 1px solid var(--el-border-color-light);
  }

  .header-row {
    .el-col {
      background-color: var(--el-fill-color) !important;
      font-weight: 500;
      color: var(--el-text-color-primary);
      padding: 8px 5px;
      text-align: center;
      font-size: 13px;
    }
  }

  .el-row {
    .el-col {
      border: 1px solid var(--el-border-color-lighter);
      padding: 8px 5px;
      text-align: center;
      font-size: 12px;
      color: var(--el-text-color-regular);
      min-height: 36px;
      display: flex;
      align-items: center;
      justify-content: center;

      &:first-child,
      &:nth-child(3),
      &:nth-child(5),
      &:nth-child(7)  {
        font-weight: 500;
        color: var(--el-text-color-primary);
        background-color: var(--el-fill-color-lighter);
      }
    }
  }
}
</style>
